<template>
  <div id="column" class="column" :style="{'width':cloumnWidth+'px'}">
    <!-- <div class="arrow"  @click="arrowClick" :style="'top:'+arrowTop+'px;display:none;'" >
      <i :class="isCollapse?'icon-youyou':'icon-zuozuo'" class="iconfont"></i>
    </div> -->
    <el-menu id="el-menu-main"
             :text-color="color"
             active-text-color="#c9d0e2"
             :default-active="menuActive"
             :default-openeds="menuOpened"
             :unique-opened="true"
             :router="false"
             :collapse="false"
             :collapse-transition="false"
             @select="menuSelect">
      <template v-for="list in newColumn">
        <el-submenu v-if="list.children.length > 0" :key="list.menu_name" :index="list.menu_name">
          <template slot="title">
            <i :class="list.icon=='img'?'icontu':list.icon"
               :style="{'color':color,'background-image':list.icon=='img'?`url('/static/img/kpihui.png')`:''}"></i>
            <span slot="title" style="color:#a0a9c0" @click="notPush(list)">{{ list.menu_name}}</span>
          </template>
          <Menu :menuList.sync="list.children"></Menu>
        </el-submenu>
        <el-menu-item v-else-if="list.menu_url" :index="list.menu_index" :key="list.menu_name">
          <router-link :to="{name:list.menu_url,query:{code:list.menu_code}}" tag="div">
            <span>{{list.menu_name}}</span>
          </router-link>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<style lang="scss">
  .column {
  	position: relative;
  	// border-right: 1px solid #cdd2d2;
  	background: none repeat scroll 0 0 #121f3e;
    transition: all 0.2s;
    min-width:220px;
    top:-43px;
    margin-bottom: -43px;
  	#el-menu-main{
  	  float: left;
      border-right:none;
      padding: 25px 13px 0;
      width: 100%;
      background-color: #121f3e;
      .el-submenu__title{
          &:hover{
            background-color:#1b2849;
          }
          .iconfont{
            max-width: 17px;
            display: inline-block;
          }
      }
      .el-menu-item{
        font-size: 12px;
        &.is-active{
          background: #3c43b6!important;
          position: relative;
        }
        &:hover{
          background-color: #3c43b6;
          span{
            transition: all 0.3s;
            color:#dbe2f3!important;
          }
        }
        &:focus{
          background-color: #3c43b6;
          span{
            transition: all 0.3s;
            color:#dbe2f3!important;
          }
        }
      }

  		&.el-menu--collapse{
  			.el-submenu{
  				.el-submenu__title{
  					padding: 0 0 0 5px!important;
            text-align: center;
           
  				}
  			}
  		}
  	  .el-submenu {
        &.is-opened{
          background: #1b2849;
          .el-submenu__title{
            .el-submenu__icon-arrow {
             transform:initial;
              &::before{
                content: '-';
              }
            }
          }
        }
        &.is-active{
          .el-submenu__title{
            span{
              color:#dbe2f3!important;
            }
          }
          .el-menu{
            .el-menu-item{
              &.is-active{
                background: #3c43b6!important;
                position: relative;
                &::before{
                  content: '';
                  display: block;
                  position: absolute;
                  width: 3px;
                  height: 17px;
                  top:50%;
                  left:0;
                  transform: translateY(-50%);
                  background-color: #545deb;
                }
              }
            }
          }
        }
  			.el-menu--inline{
          padding: 7px 7px;
          background-color:#1b2849;
  				.el-menu-item{
  					line-height: 40px;
            height: 40px;
            min-width: 180px;
  					// width: 242px;
  					i{
  						font-size: 30px;
  						line-height: 40px;
              vertical-align: top;
              color:#7e879d!important;
  					}
  					
  				}
  				.el-submenu{
  					 &.is-opened{
  						.el-submenu__title{
                span{
                    color:#dbe2f3 !important;
                }
                .el-icon-arrow-down{
                  &::before{
                    content: '-';
                  }
                }
  						}
  					 }
  						.el-submenu__title{
  							border: none;
  							line-height: 40px;
  							height: 40px;
  							font-size: 14px;
  							i{
  								&:first-child{
  									font-size: 30px;
  									line-height: 40px;
                    vertical-align: top;
  								}
  							}
  							span{
                  font-size: 14px;
                  color:#a0a9c0!important;
  							}
                .el-icon-arrow-down{
                  &::before{
                    content:'+';
                  }
                }
  						}
  						>.el-menu--inline{
  							.el-menu-item {
                  min-width: 175px;
  								>i{
  									display: none;
  								}
  							}
  						}
  				}
  			}
  			.el-submenu__title{
  				// text-align: center
  				height: 44px;
  				line-height: 44px;
  				span{
  					font-size: 14px;
  				}
  				.icontu{
  					vertical-align: sub;
  					font-size: 15px;
  					width: 15px;
  					margin-right: 0;
  					height: 15px;
  					display: inline-block;
  					background-size: 100% 100%;
  			}
  		}
  		.el-submenu__icon-arrow{
        right: 20px;
        transform:initial;
        &::before{
          content: '+';
        }
  		}
  	 }
  	}
		.arrow{
			display: block;
			line-height: 63px;
			color: #6689f1;
      user-select: none;
      left:100%;
			cursor: pointer;
      position: absolute;
			top:211px;
			transform: translateY(-50%);
			z-index: 999;
			text-align: center;
			width: 13px;
			height: 63px;
			&:hover{
				&::before{
					background: #d5e2ff;
				}
			}
			&::before {					//梯形
				content:'';    /*用伪元素来生成一个矩形*/
				transition: all 0.2s;
				position:absolute;
				top:0; right:0; bottom:0; left:0;
				border-radius:0 3px 3px 0;
				background:#f7faff;
				z-index:-1;    /*背景色要在文字的下一层，以免挡住文字*/
				transform: perspective(100px) rotateY(40deg) scaleX(1.2);
			}
			i{
				font-size: 12px;
			}
		}
	}
</style>
<script>
  import config from "@/config/config.js";
  import Menu from "@/components/sys/assembly/menu"
  export default {
    data() {
      return {
        cloumnWidth: 220,
        newColumn: [],
        color: "#a0a9c0",
        defaultProps: {
          label: 'menu_name'
        },
        menuActive: '',
        menuOpened: [],
        isCollapse: true,
        // switchIcon: 'el-icon-arrow-left', //按钮class
        reportColumn: [],               //报表菜单
        // arrowTop:211,
        // headerActive:this.$route.meta.type
      };
    },
    props: ['menu','headerActive','menutype'],
    components: {
      Menu
    },
    watch: {
      menu(val) {
        console.log(val);
        for (let i in val) {
          if (this.headerActive == val[i].menu_url) {
            this.newColumn = val[i].children
          }
        }
        this.getsysMenu();
      }
    },
    created() {
    },
    beforeDestroy(){
      window.onresize=null;
    },
    mounted() {
      this.getsysMenu();
      //左侧菜单
      setTimeout(() => {
        window.onresize = () => {
          var contentwidth = $('#main').width() - this.cloumnWidth;
          this.$Bus.$emit("ContentWidthChange", contentwidth + 'px')
        }
      }, 200);
      //按钮根据滚动条移动
      // window.onscroll=()=>{
      //   let t =document.documentElement.scrollTop||document.body.scrollTop;
      //   this.arrowTop=t+211;
      // }
    },
    methods: {
      getsysMenu() {
        let menu = this.menu ? this.menu : [];
        for (let i in menu) {
          if (menu[i].menu_url == this.headerActive) {
            this.newColumn = menu[i].children;
            break;
          }
        }
        //判断当页面是否为报表查询 ,
        if (this.menutype) {
          //配置menu_index;如果为报表查询时menu_index值为code
          recursion(this.newColumn);
          function recursion(val) {
            for (let i in val) {
              val[i].menu_index = val[i].menu_code;
              if (val[i].children) {
                recursion(val[i].children)
              }
            }
          }
          this.menuActive = localStorage.reportactive && localStorage.reportactive == this.$route.query.code ? localStorage.reportactive : this.$route.query.code;
          this.menuOpened = localStorage.reportopened ? JSON.parse(localStorage.reportopened) : Array.of(this.newColumn[0].menu_name);
        } else {
          //配置menu_index;如果为报表查询时menu_index值为url
          recursion2(this.newColumn);
          function recursion2(val) {
            for (let i in val) {
              val[i].menu_index = val[i].menu_url;
              if (val[i].children) {
                recursion2(val[i].children)
              }
            }
          }
          this.menuActive = localStorage.active ? localStorage.active :(this.$route.name=='addEnterprise'?'enterprisemanager':(this.$route.name=='coordinate'?'heatmapInstall':this.$route.name));
          this.menuOpened = localStorage.opened ? JSON.parse(localStorage.opened) : [];
        }
        this.isCollapse = sessionStorage.isCollapse === 'true' ? true : false
        this.switchIcon = sessionStorage.switchIcon ? sessionStorage.switchIcon : 'el-icon-arrow-left';
        // this.cloumnWidth = this.isCollapse ? 35 : 220;
      },
      //左侧按钮点击
      arrowClick() {
        this.isCollapse = !this.isCollapse;
        this.cloumnWidth = this.isCollapse ? 35 : 220;
        // this.switchIcon = this.isCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left'
        sessionStorage.isCollapse = this.isCollapse;
        sessionStorage.switchIcon = this.switchIcon;
        var contentwidth = $('#main').width() - this.cloumnWidth;
        this.$Bus.$emit("ContentWidthChange", contentwidth + 'px')
        this.$Bus.$emit('ArrowClick', contentwidth - 189);
        // this.$nextTick(() => {
        // })
      },
      menuSelect(active, opened) {
        // console.log(active, 'active');
        // console.log(opened, 'opened');
        if (this.menutype) {
          localStorage.reportactive = active;
          localStorage.reportopened = JSON.stringify(opened)
        } else {
          // localStorage.active = active
          localStorage.opened = JSON.stringify(opened)
        }
      } ,
      notPush(list){
        if(list.children.length == 0) this.$message.warning('没有子菜单权限')
      }
    },
  };
</script>
